<template lang="html">
  <div class="editor">
    <div ref="toolbar" class="toolbar"></div>
    <div ref="editor" class="text"></div>
  </div>
</template>

<script>
import E from 'wangeditor'
import { uploadImg } from '@/api/content-management'
const { BtnMenu } = E
export default {
  name: 'editor',
  props: {

    isClear: {
      type: Boolean,
      default: false
    },

    disabled: {
      type: Boolean,
      default: false
    },

    maxLimit: {
      type: Number,
      default: 4
    }
  },
  data () {
    return {
      fontSizeConfig: {
        'x-small': { name: '12px', value: '1' },
        'small': { name: '14px', value: '2' },
        'normal': { name: '16px', value: '3' },
        'large': { name: '18px', value: '4' },
        'x-large': { name: '24px', value: '5' },
        'xx-large': { name: '32px', value: '6' },
        'xxx-large': { name: '48px', value: '7' }
      },
      menus: [
        'head',
        'bold',
        'fontSize',
        'fontName',
        'italic',
        'tab',
        'justify',
        'lineHeight',
        'indent',
        'image',
        'foreColor',
        'backColor',
        'list',
        'underline',
        'strikeThrough',

        'quote',
        'link',
        'table',
        'undo',
        'redo'

      ],
      color: [
        '#333333',
        '#000000',
        '#708090',
        '#4d80bf',
        '#c24f4a',
        '#8baa4a',
        '#7b5ba1',
        '#46acc8',
        '#f9963b'
      ],
      info_: '',
      editor: null
    }
  },
  watch: {
    isClear (val) {
      if (val) {
        this.editor.txt.clear()
      }
    }
  },
  mounted () {
    this.$nextTick(() => this.setEditor())
  },
  beforeDestroy () {
    this.editor.txt.clear()
    this.editor.destroy()
    this.editor = null
  },
  methods: {
    setEditor () {
      this.editor = new E(this.$refs.toolbar, this.$refs.editor)
      this.editor.menus.extend('tab', this.initTabBtn('editor'))
      this.editor.config.colors = this.color
      this.editor.config.fontSizes = this.fontSizeConfig
      this.editor.config.showLinkImg = false
      this.editor.config.pasteIgnoreImg = true

      this.editor.config.uploadImgShowBase64 = false

      this.editor.config.uploadImgMaxSize = 2 * 1024 * 1024
      this.editor.config.uploadImgMaxLength = 6
      this.editor.config.uploadImgTimeout = 3 * 60 * 1000
      this.editor.config.customUploadImg = (files, insert) => {
        let formData = new FormData()
        formData.append('file', files[0])
        uploadImg(formData).then(res => {
          let items = res.data.map(({ fileAddress }) => fileAddress)
          items.map(item => insert(item))
        }).catch(err => {
          this.$Message.error(err.msg ? err.msg : err.message)
        })
      }

      this.editor.config.menus = this.menus

      this.editor.config.onchange = html => {
        let newHtml = html == '<p><br/></p>' ? '' : html
        this.info_ = newHtml
        this.$emit('changeHtml', this.info_)
      }

      this.editor.create()
      this.editor.txt.html(this.editorContent)
    },

    initTabBtn (editorName) {
      let _this = this
      class imgMenu extends BtnMenu {
        constructor (editor) {
          const $elem = E.$(
            `<div class="w-e-menu" data-title="tab">
                <span>tab</span>
            </div>`)
          super($elem, editor)
        }
        clickHandler () {
          _this[editorName].cmd.do('insertHTML', `　`)
        }
        tryChangeActive () {

        }
      }
      return imgMenu
    },

    setHtml (txt) {
      this.editor.txt.html(txt)
    },
    initEdit () {
      this.$nextTick(() => this.setEditor())
    },
    destroyEdit () {
      this.editor.destroy()
      this.editor = null
    }
  }
}
</script>
<style  lang="scss">
.w-e-text {
  min-height: 500px;
  max-height: 800px;
  font[size="1"] {
    font-size: 12px;
  }
  font[size="2"] {
    font-size: 14px;
  }
}
.w-e-text-container p {
  color: #333;
}
.w-e-text::-webkit-scrollbar {
  width: 8px !important;
  height: 8px !important;
}
.w-e-text::-webkit-scrollbar-thumb {
  border-radius: 5px !important;
  box-shadow: 0 0 2px #fff !important;
  background-color: #ddd !important;
}
.w-e-text::-webkit-scrollbar-track {
  border-radius: 0;
  box-shadow: inset 0 0 2px #fff;
}
</style>
<style lang="scss" scoped>
.editor {
  width: 100%;
  position: relative;
  z-index: 0;
}
.toolbar {
  border: 1px solid #ccc;
  border-bottom: none;
  width: 100%;

}
.text {
  border: 1px solid #ccc;
}
</style>
